<template>
  <div id="login_app">
    <div class="borderd">
      <div class="form-panel">
        <div class="login-logo"></div>
        <el-form
          status-icon
          class="demo-ruleForm"
          :rules="rules"
          :model="list_data"
        >
          <el-form-item prop="pass" class="el-item-hhh">
            <el-input
              type="text"
              autocomplete="off"
              placeholder="请输入您的用户名"
              v-model="list_data.username"
            ></el-input>
          </el-form-item>
          <el-form-item prop="checkPass" class="el-item-hhh">
            <el-input
              type="password"
              autocomplete="off"
              placeholder="请输入相应的密码"
              v-model="list_data.password"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
// import axios from "../utils/http.js";

export default {
  data() {
    return {
      list_data: {
        username: "admin",
        password: "admin888",
      },
      rules: {
        //表单对应的数据校验
        username: [
          //{校验的规则，required固定的非空校验，message是错误提示，trigger触发校验的事件
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submit() {
      this.$axios.post("/userlogin", this.list_data).then((res) => {
        if (res.code == 200) {
          localStorage.setItem("loginData", JSON.stringify(res.list));
          this.$message({
            message: res.msg,
            type: "success",
          });
          this.$router.push("/layout");
        } else {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      });
    },
  },
};
</script>

<style>
#login_app {
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(to bottom, #ff5a3b, #eb8b7a);
}
#login_app > .borderd {
  width: 900px;
  height: 100vh;
  position: absolute;
  right: 200px;
  background: url("../../public/images/loginbg.png") no-repeat center center;
  background-size: 750px;
}
.form-panel {
  width: 350px;
  height: 500px;
  position: absolute;
  top: 150px;
  right: 120px;
}
#login_app .login-logo {
  width: 350px;
  height: 100px;
  background: url("../../public/images/logo.png");
  background-size: 300px;
  background-repeat: no-repeat;
  background-position: center center;
  margin-top: 30px;
}
.el-form-item__content > button {
  width: 100%;
  border-radius: 20px;
  background-color: #ff5a3b;
  border: none;
}
.el-form-item__content > button:hover {
  background-color: #e43516;
}
.el-input__inner {
  border: none !important;
  border-bottom: 1px #ff5a3b solid !important;
  border-radius: 0;
  background-color: #fff6f5;
}
.demo-ruleForm {
  margin-top: 100px;
}
.el-item-hhh {
  margin-top: 30px;
}
</style>